<template>
  <layout :thumb="item.mainImageUrl" isTour :label="item.areaName" :tag="item.categoryName" :soldOut="!item.redundancyMinPrice" @click="$emit('click')">
    <div class="trip-content" >
      <div class="top">
        <p class="trip-title">
          <rich-text class="rich_text" :nodes="item.productName">
          </rich-text>
        </p>
        <div class="sell-points">
          <view class="" v-for="(tag, index) in item.tagNames" :key="tag">
            <tagsItem v-if="index == 0" :item="tag" :key="tag" />
            <tagsItem v-else :item="tag" :key="tag" accent background="rgba(141, 152, 175, 0.1)" color="rgba(141, 152, 175, 1)" />
          </view>
          <!-- <tagsItem v-for="(tag, index) in item.tagNames" :item="tag" :key="tag" :accent="index != 0" /> -->
        </div>
      </div>
      <div v-if="item.redundancyMinPrice">
        <basic-price :price="item.redundancyMinPrice" size="36rpx" :weight="600" unitSize="24rpx" color="#FF5944" unitColor="#FF5944" />
        <span class="sub-text">起</span>
      </div>
    </div>
  </layout>
</template>

<script>
import layout from './normal-layout'
import tagsItem from './tags-item'

export default {
  props: {
    item: { type: Object, default: () => ({}) },
  },
  components: { 
    layout,
    tagsItem
  },
}
</script>

<style lang="less" scoped>
@import "~@/style/iconfont.less";

.trip-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 176rpx; 
}

.trip-title {
  .muti-line-ellipsis(2);

  font-size: 28rpx;
  color: @font_color;
  font-weight: 600;
  margin-bottom: 8rpx;
}


.sub-text {
  color: @font_light_color;
  font-size: 20rpx;
  font-weight: normal;
  padding-left: 5rpx;
}

.sell-points {
  // margin-top: 8rpx;
  display: flex;
  flex-wrap: wrap;
}

</style>